<template>
  <div class="add">
    <input v-model="productName" type="text" placeholder="品牌名称" />

    <input v-model.number="price" type="text" placeholder="价格" />

    <input v-model.number="count" type="text" placeholder="数量" />

    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: "",
      price: "",
      count: "",
    };
  },
  methods: {
    add() {
      const { productName, price, count } = this;

      // 非空校验
      if (!productName || !price || !count) return;

      // 触发一个 add 的自定义事件
      this.$emit("add", {
        productName,
        price,
        count,
      });
    },
  },
};
</script>
